<template>
  <div class="container">
    <!-- 面包屑导航 -->
    <div class="breadcrumb">
          <navbar></navbar>
    </div>
    <!-- 面包屑导航 -->
    <div class="Box">
      <div class="table_tab">
        <div class="inquiry">
          <div class="headerbox">
            <div class="header">
              数据筛选
            </div>

          </div>
          <el-form
            :inline="true"
            ref="queryForm"
            :model="search"
            size="small"
             class="search-form"
          >
           <el-form-item  label="客户信息">
              <el-input placeholder="请输入客户信息" v-model="form.customerInfo"></el-input>
          </el-form-item>
           <el-form-item label="收款账号">
              <el-input placeholder="请输入收款账号" v-model="form.accountNo"></el-input>
          </el-form-item>
           <el-form-item label="提现平台">
              <el-select
                  v-model="form.arrivalType"
                  placeholder="请选择提现平台"
                  filterable
                  clearable
              >
                <el-option
                    v-for="items in dictionaries.commission_arrival_type"
                     :key="items.dictId"
                    :label="items.dictName"
                    :value="items.dictId"
                >
                </el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="状态">
              <el-select
                  v-model="form.applyStatus"
                  placeholder="请选择状态"
                  filterable
                  clearable
              >
                <el-option
                    v-for="items in dictionaries.commission_apply_status"
                    :key="items.dictId"
                    :label="items.dictName"
                    :value="items.dictId"
                >
                </el-option>
              </el-select>
          </el-form-item>
          <el-form-item label="提交时间">
            <el-date-picker
              v-model="submitData"
              type="daterange"
              unlink-panels
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              @change="onChangeSubmitData"
              value-format="yyyy-MM-dd HH:mm:ss"
             :default-time="['00:00:00', '23:59:59']">
            >
            </el-date-picker>
          </el-form-item>
          <el-form-item label="审核人">
              <el-select
                  v-model="form.approvedId"
                  placeholder="请选择审核人"
                  filterable
                  clearable
              >
                <el-option
                    v-for="item in approverList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="审核时间">
             <el-date-picker
              v-model="auditData"
              type="daterange"
              unlink-panels
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              @change="onChangeAuditData"
              value-format="yyyy-MM-dd HH:mm:ss"
             :default-time="['00:00:00', '23:59:59']">
            >
            </el-date-picker>
          </el-form-item>
           <el-form-item label="打款人">
              <el-select
                  v-model="form.paymentId"
                  placeholder="请选择打款人"
                  filterable
                  clearable
              >
                <el-option
                    v-for="item in paymentList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                >
                </el-option>
              </el-select>
          </el-form-item>
           <el-form-item label="到账时间">
               <el-date-picker
              v-model="accountData"
              type="daterange"
              unlink-panels
              clearable
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              format="yyyy-MM-dd"
              @change="onChangeAccountData"
              value-format="yyyy-MM-dd HH:mm:ss"
             :default-time="['00:00:00', '23:59:59']">
            >
            </el-date-picker>
          </el-form-item>
            <el-form-item>
              <el-button
                @click="fetchData('search')"
                plain
                v-on:keyup.enter="fetchData('search')"
                type="primary"
                >搜索</el-button
              >
              <el-button plain @click="fetchData('reset')" type="primary">重置</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="inquiryTab">
          <div class="inquiryTab_header">
            <div class="tabTitle">
              <label>数据统计</label>
              <p><label @click="settingUp">设置</label>提现手续费{{setFrom.handlingFeeRate}}%</p>
              <p>提现方式：微信、支付宝、银行卡</p>
            </div>
            <div style="line-height:51px">
              <el-button
                @click="handlerBtnPass"
                type="success"
                style="width: 120px; height: 36px; line-height: 11px"
                >通过</el-button>
              <el-button
                @click="handlerBtnNoPass"
                type="danger"
                style="width: 120px; height: 36px; line-height: 11px"
                >不通过</el-button>
              <el-button
                @click="handlerBtnWithdraw"
                type="warning"
                style="width: 120px; height: 36px; line-height: 11px"
                >打款</el-button>
              <!--
               <el-button
                @click="settingUp"
                type="primary"
                style="width: 120px; height: 36px; line-height: 11px"
                >设置</el-button>
              -->
          </div>
          </div>
          <div class="tongji">
            <ul>
              <li><p>申请提现总额</p><p>￥{{totalCount.applyMoney}}</p></li>
              <li><p>提现成功总额</p><p>￥{{totalCount.appliedSuccessMoney}}</p></li>
              <li><p>提现失败总额</p><p>￥{{totalCount.appliedFailMoney}}</p></li>
              <li><p>手续费总额</p><p>￥{{totalCount.handlingFee}}</p></li>
              <li><p>待打款金额</p><p>￥{{totalCount.waitPayMoney}}</p></li>
              <li><p>待审核金额</p><p>￥{{totalCount.waitAuditMoney}}</p></li>
            </ul>
            <ul>
              <li><p>申请提现总人数</p><p>{{totalCount.applyNum}}人</p></li>
              <li><p>提现成功次数</p><p>{{totalCount.applySuccessNum}}人</p></li>
              <li><p>提现失败次数</p><p>{{totalCount.applyFailNum}}人</p></li>
            </ul>
          </div>
          <div class="table">
           <!-- @receiveData="handlerSkip" -->
           <matrix-table :dataList="manage.page.list" :config="manage.config" :loading="manage.loading"
           @tableSelectionChange="hanlderSelectsValues"
           @withdraw="handlerWithdraw"
           @withdrawPass="handlerWithdrawPass"
           @withdrawNoPass="handlerWithdrawNoPass"></matrix-table>
             <div class="page" >
               <div class="block">
                  <el-pagination
                      @size-change="onSizeChange"
                      @current-change="onCurrentChange"
                      :current-page="manage.page.pageNo"
                      :page-sizes="[3, 5, 10, 20, 50]"
                      :page-size="manage.page.pageSize"
                      layout="total,sizes, prev, pager, next"
                      :total="manage.page.totalNum">
                  </el-pagination>
                </div>
             </div>
          </div>
        </div>
      </div>
    </div>
     <el-dialog
        :title="dialog.title"
        :visible.sync="dialog.visible"
        append-to-body
        width="450px"
        :before-close="handleClose">
        <template v-if="dialog.type=='withdraw'||dialog.type=='withdrawPass'">
          <div class="dialogCenter">
            <div  class="dialogTitle">是否{{dialog.title}}?</div>
            <div v-if="dialog.title!='批量通过'&&dialog.title!='批量打款'">姓名：<span style="color:red;">{{withdrawRow.customerName}}</span>，打款金额：<span style="color:red;">{{withdrawRow.receivedMoney}}元</span></div>
          </div>
          <div class="btnClass">
              <el-button class="operationBtn" @click="dialog.visible = false">取 消</el-button>
              <el-button class="operationBtn"  type="primary" @click="dialogSubmit">确 定</el-button>
          </div>
        </template>
         <template v-if="dialog.type=='withdrawNoPass'">
          <div class="dialogNopass">
            <span class="dialogTitle">是否{{dialog.title}}?&nbsp;&nbsp;</span><span v-if="isShow">(姓名：<span style="color:red;">{{withdrawRow.customerName}}</span>，打款金额：<span style="color:red;">{{withdrawRow.receivedMoney}}元</span>)</span>
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="108px" class="demo-ruleForm">
              <el-form-item label="不通过原因：" prop="cause">
                <el-input type="textarea" v-model="ruleForm.cause"></el-input>
              </el-form-item>
            </el-form>
          </div>
          <div class="btnClass">
              <el-button class="operationBtn"  @click="dialog.visible = false">取 消</el-button>
              <el-button class="operationBtn"  type="primary" @click="npPassDialogSubmit('ruleForm')">确 定</el-button>
          </div>
        </template>
        <template v-if="dialog.type=='set'">
          <div class="set">
              <el-form :model="setFrom" :rules="setFromRules" ref="setFrom" label-width="108px" class="demo-ruleForm">
               <el-form-item label="提现方式：" prop="applyType">
                <el-checkbox-group v-model="setFrom.applyType" @change="handlerCheckbox">
                  <el-checkbox v-for="(item,index) in dictionaries.commission_arrival_type" :key="index" :label="item.dictId" name="type">{{item.dictName}}</el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-form-item label="提现手续费：" prop="handlingFeeRate">
                <el-input size="mini" style="width:70px" v-model="setFrom.handlingFeeRate"></el-input> %
              </el-form-item>
            </el-form>
          </div>
          <div class="btnClass">
              <el-button class="operationBtn"  @click="onCancelSet">取 消</el-button>
              <el-button class="operationBtn"  type="primary" @click="setPayMethod('setFrom')">确 定</el-button>
          </div>
        </template>
      </el-dialog>
  </div>
</template>

<script>
import MatrixTable from './components/MatrixTable.vue'
import common from './mixins/common'
import navbar from '@/components/navbar.vue'
import Label from '@/pages/examination/label'
export default {
  mixins: [common],
  watch: {
    dialog: {
      handler (newVal, oldVal) {
        if (newVal.type === 'set') {
          this.getSettingUp()
        }
      },
      deep: true
    }
  },
  components: {
    Label,
    MatrixTable,
    navbar
  },
  data () {
    return {
      accountData: [], // 到账时间
      auditData: [], // 审核时间
      submitData: [], // 提交时间
      form: {
        customerInfo: '', // string or null 客户信息
        accountNo: '', // string or null 收款账号
        arrivalType: '', // string or null 提现平台 字典：commission_arrival_type
        applyStatus: '', // string or null 状态 字典：commission_apply_status
        createdDateStart: '', // string or null 提交时间-开始
        createdDateEnd: '', // string or null 提交时间-结束
        approvedId: '', // integer or null 审批人id 数据来源：/basic/commissionApply/getApproverList
        approvedDateStart: '', // string or null 审核时间-开始
        approvedDateEnd: '', // string or null 审核时间-结束
        paymentId: '', // integer or null 打款人 数据来源：/basic/commissionApply/getPaidUserList
        receivedDateStart: '', // string or null 到账时间-开始
        receivedDateEnd: '' // string or null 到账时间-结束
      },
      isShow: false,
      ruleForm: { // 不通过弹框原因
        cause: ''
      },
      setFrom: { // 设置弹框内表单
        applyType: '',
        handlingFeeRate: 0
      },
      rules: { // 不通过弹框原因校验
        cause: [
          { required: true, message: '请填写不通过原因', trigger: 'blur' }
        ]
      },
      setFromRules: { // 设置弹框必填校验
        applyType: [
          { type: 'array', required: true, message: '请至少选择一个提现方式', trigger: 'change' }
        ],
        handlingFeeRate: [
          { required: true, message: '请输入提现手续费', trigger: 'blur' }
        ]
      },
      dialog: { visible: false, title: '编辑', type: '' },
      selectsValues: [], // 表格多选数据
      platformList: [], // 平台列表
      manage: {
        loading: false,
        page: { list: [], pageNo: 1, pageSize: 10, totalNum: 0, currentPage: 1 }, // 员工业绩统计(XX年XX月)
        sortObj: { prop: 'marketPrice', order: 'descending' }, // 排序
        config: [
          { type: 'selection', label: '选择', width: 55 },
          { prop: 'customerName', label: '客户信息', slot: 'customer', width: 80 },
          { prop: 'accountNo', label: '收款账号', slot: 'accountNo', width: 150, align: 'left' },
          // { prop: 'bankName', label: '开户行名称' },
          // { prop: 'name', label: '真实姓名' },
          { prop: 'arrivalTypeLabel', label: '提现平台', width: 70 },
          { prop: 'applyMoney', label: '申请金额', width: 70 },
          { prop: 'handlingFee', label: '本次提现手续费', width: 110 },
          { prop: 'receivedMoney', label: '到账金额', width: 70 },
          { prop: 'appliedMoney', label: '已提现', width: 55 },
          { prop: 'balanceMoney', label: '账户余额', width: 70 },
          { prop: 'applyStatusLabel', label: '状态', width: 55 },
          { prop: 'createdTime', label: '提交时间', width: 120 },
          { prop: 'approvedName', label: '审核信息', slot: 'approvedName', width: 125 },
          { prop: 'paymentName', label: '到账信息', slot: 'paymentName', width: 125 },
          { prop: 'approveContent', label: '不通过原因' },
          { prop: 'approveContent', label: '操作', slot: 'money', width: 100 }
        ]
      },
      totalCount: { // 提现列表汇总统计
        applyMoney: 0, // 申请提现总额
        appliedSuccessMoney: 0, // 提现成功总额
        appliedFailMoney: 0, // 提现失败总额
        handlingFee: 0, // 收取手续费总额
        waitPayMoney: 0, // 待打款金额
        waitAuditMoney: 0, // 待审核金额 待审核通过金额
        applyNum: 0, // 申请提现总人数
        applySuccessNum: 0, // 提现成功次数
        applyFailNum: 0 // 提现失败次数
      },
      parArray: [],
      search: {
        platformId: ''
      },
      approverList: [], // 审批人列表
      paymentList: [], // 打款人数据
      withdrawRow: {}, // 点击打款获取每一行的数据
      lastTime: 0 // 防抖
    }
  },
  mounted () {

  },
  created () {
    this.fetchData()
    this.getPlatformList() // 获取平台列表
    this.getMatrixApproverList() // 获取审批人数据
    this.getMatrixPaymentList()// 打款人数据
    this.getSettingUp()
    // 权限设定判断
    this.limits = JSON.parse(sessionStorage.getItem('limit'))
    const params = this.limits.buttonTreeDto.filter(
      (item) => item.menuCode === 'categoryManage'// 菜单管理里面的菜单编码
    )
    params[0].buttonList.forEach((item) => {
      this.parArray.push(item.code)
    })
    console.log(this.parArray)
    // 权限设定判断
    document.onkeydown = (e) => {
      const key = window.event.keyCode
      if (key == 13) {
        this.searchEvent()
      }
    }
  },
  beforeRouteLeave (to, form, next) {
    document.onkeydown = null
    next()
  },

  methods: {
    handlerCheckbox (e) {
      console.log(e)
    },
    // 到账时间
    onChangeAccountData (e) {
      if (e) {
        this.form.receivedDateStart = e[0]
        this.form.receivedDateEnd = e[1]
      } else {
        this.form.receivedDateStart = ''
        this.form.receivedDateEnd = ''
      }
    },
    // 审核时间
    onChangeAuditData (e) {
      if (e) {
        this.form.approvedDateStart = e[0]
        this.form.approvedDateEnd = e[1]
      } else {
        this.form.approvedDateStart = ''
        this.form.approvedDateEnd = ''
      }
    },
    // 提交时间
    onChangeSubmitData (e) {
      if (e) {
        this.form.createdDateStart = e[0]
        this.form.createdDateEnd = e[1]
      } else {
        this.form.createdDateStart = ''
        this.form.createdDateEnd = ''
      }
    },
    onCancelSet () {
      this.dialog.visible = false
      this.getSettingUp()
    },
    setPayMethod (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const that = this
          // 获取当前时间的时间戳
          const now = new Date().valueOf()
          // 第一次点击
          if (this.lastTime === 0) {
            that.setDialogSubmit()
            that.lastTime = now
          } else {
            if ((now - that.lastTime) > 2000) {
              // 重置上一次点击时间，2000是我自己设置的2秒间隔，根据自己的需要更改
              that.lastTime = now
              that.setDialogSubmit()

              // 添加自己要调用的方法
            } else {
              console.log('不触发')
            }
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 设置弹框确定
    setDialogSubmit () {
      const data = {
        applyType: this.setFrom.applyType,
        handlingFeeRate: this.setFrom.handlingFeeRate
      }
      this.$api.matrixCashConfigSave(data).then((res) => {
        if (res.code === 0) {
          this.$message.success('提交成功！')
          this.dialog.visible = false
        } else {
          this.$message.warning(res.message)
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 通过确定按钮
    // dialogSubmit () {
    //   if (this.dialog.type === 'withdrawPass') {

    //   }
    // },
    // 不通过确认
    npPassDialogSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.selectsValues.length) { // 批量
            console.log('批量不通过')
            this.noPassMoney()
          } else { // 单个
            console.log('不通过')
            this.noPassMoney()
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 不通过
    noPassMoney () {
      const ids = []
      if (this.selectsValues.length !== 0) {
        this.selectsValues.forEach((item) => {
          ids.push(item.applyNo)
        })
      } else {
        ids.push(this.withdrawRow.applyNo)
      }
      const data = {
        applyNos: ids,
        applyContent: this.ruleForm.cause
      }
      this.$api.matrixCashNoPass(data).then((res) => {
        if (res.code == 0) {
          console.log(res)
          this.$message.success('操作成功！')
          this.fetchData('search')
          this.dialog.visible = false
          this.ruleForm.cause = ''
        } else {
          this.dialog.visible = false
          this.ruleForm.cause = ''
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 打款
    remitMoney () {
      const ids = []
      if (this.selectsValues.length !== 0) {
        this.selectsValues.forEach((item) => {
          ids.push(item.applyNo)
        })
      } else {
        ids.push(this.withdrawRow.applyNo)
      }
      const data = {
        applyNos: ids
      }
      this.$api.matrixCashPayment(data).then((res) => {
        if (res.code == 0) {
          console.log(res)
          this.$message.success('打款成功！')
          this.fetchData('search')
          this.dialog.visible = false
        } else {
          this.dialog.visible = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 审核通过
    passMoney () {
      const ids = []
      if (this.selectsValues.length !== 0) {
        this.selectsValues.forEach((item) => {
          ids.push(item.applyNo)
        })
      } else {
        ids.push(this.withdrawRow.applyNo)
      }
      const params = {
        applyNos: ids
      }
      this.$api.matrixCashPass(params).then((res) => {
        if (res.code == 0) {
          console.log(res)
          this.$message.success('审核通过！')
          this.fetchData('search')
          this.dialog.visible = false
        } else {
          this.dialog.visible = false
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 提现通过或者打款
    dialogSubmit () {
      if (this.selectsValues.length) { // 批量
        if (this.dialog.type === 'withdraw') { // 批量打款或批量通过
          console.log('批量打款')
          this.remitMoney()
        } else { // 批量通过
          console.log('批量通过')
          this.passMoney()
        }
      } else { // 单个
        if (this.dialog.type === 'withdraw') { // 单个打款或操作
          console.log(' 打款')
          this.remitMoney()
        } else { // 通过
          console.log('通过')
          this.passMoney()
        }
      }
    },
    // 设置
    settingUp () {
      this.dialog.visible = true
      this.dialog.title = '设置'
      this.dialog.type = 'set'
      this.getSettingUp()
    },
    getSettingUp () {
      const params = {}
      this.$api.matrixCashConfig(params).then((res) => {
        if (res.code === 0) {
          this.setFrom.applyType = res.data.applyType
          this.setFrom.handlingFeeRate = res.data.handlingFeeRate
        }
      }).catch((err) => {
        console.log(err)
      })
    },
    // 批量通过
    handlerBtnPass () {
      if (this.selectsValues.length !== 0) {
        this.dialog.visible = true
        this.dialog.title = '批量通过'
        this.dialog.type = 'withdrawPass'
      } else {
        this.$message.warning('请勾选需要操作的数据！')
      }
    },
    // 批量不通过
    handlerBtnNoPass () {
      if (this.selectsValues.length !== 0) {
        this.dialog.visible = true
        this.dialog.title = '不通过'
        this.dialog.type = 'withdrawNoPass'
        this.isShow = false
      } else {
        this.$message.warning('请勾选需要操作的数据！')
      }
    },
    // 批量打款
    handlerBtnWithdraw () {
      if (this.selectsValues.length !== 0) {
        this.dialog.visible = true
        this.dialog.title = '批量打款'
        this.dialog.type = 'withdraw'
      } else {
        this.$message.warning('请勾选需要操作的数据！')
      }
    },
    // 弹框关闭
    handleClose () {
      this.dialog.visible = false
    },
    // 时间
    onChangeTime (e) {
      if (e) {
        this.assignStartTime = e[0]
        this.assignEndTime = e[1]
        // this.listAxios()
      } else {
        this.assignStartTime = ''
        this.assignEndTime = ''
        // this.listAxios()
      }
    },
    // 表格多选
    hanlderSelectsValues (e) {
      console.log(e)
      this.selectsValues = e
    },
    // 打款
    handlerWithdraw (e, num) {
      this.withdrawRow = {}
      if (this.selectsValues.length == 0) {
        this.withdrawRow = e.row
        console.log(this.withdrawRow, 'withdrawRow')
        this.dialog.visible = true
        this.dialog.type = e.type
        this.dialog.title = '打款'
      } else {
        this.$message.warning('存在多选数据请使用批量操作！')
      }
    },
    // 提现通过
    handlerWithdrawPass (e) {
      this.withdrawRow = {}
      console.log(e)
      if (this.selectsValues.length == 0) {
        this.withdrawRow = e.row
        this.dialog.visible = true
        this.dialog.title = '通过'
        this.dialog.type = e.type
      } else {
        this.$message.warning('存在多选数据请使用批量操作！')
      }
    },
    // 提现不通过
    handlerWithdrawNoPass (e) {
      this.withdrawRow = {}
      console.log(e)
      if (this.selectsValues.length == 0) {
        this.withdrawRow = e.row
        this.dialog.visible = true
        this.dialog.title = '不通过'
        this.dialog.type = e.type
        this.isShow = true
      } else {
        this.$message.warning('存在多选数据请使用批量操作！')
      }
    },
    // 获取平台列表
    getPlatformList () {
      const params = {}
      this.$api.platformDataList(params).then((res) => {
        this.platformList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 审批人列表查询接口
    getMatrixApproverList () {
      const params = {}
      this.$api.matrixApproverList(params).then((res) => {
        this.approverList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    // 获取打款人数据
    getMatrixPaymentList () {
      const params = {}
      this.$api.matrixPaymentList(params).then((res) => {
        this.paymentList = res.data
      }).catch((err) => {
        console.log(err)
      })
    },
    onSizeChange (sizeChange) {
      this.manage.page.pageNo = 1
      this.manage.page.currentPage = 1
      this.manage.page.pageSize = sizeChange
      this.fetchData('search')
    },
    onCurrentChange (currentChange) {
      this.manage.page.pageNo = currentChange
      this.fetchData('search')
    },
    fetchData (type) {
      this.manage.loading = true
      if (type === 'reset') {
        this.manage.page.pageNo = 1
        this.manage.page.pageSize = 10
        this.manage.page.currentPage = 1
        this.form = {}
        this.accountData = []
        this.auditData = []
        this.submitData = []
      }
      let params = {
        pageNo: this.manage.page.pageNo,
        pageSize: this.manage.page.pageSize
      }
      if (type === 'search') {
        // this.manage.page.currentPage = 1
        // this.manage.page.pageNo = 1
        // params.pageNo = 1
        params = Object.assign({}, params, this.form)
        // 去除字符串 前后 空格
        for (const item in params) { if (typeof params[item] === 'string') { params[item] = params[item].trim() } }
      }
      this.$api.matrixCashPageList(params).then((res) => {
        if (res.code === 0) {
          this.manage.loading = false
          this.manage.page.list = res.data.list
          this.manage.page.totalNum = res.data.totalNum
          this.getMatrixTotalCount(params)
        } else {
          this.manage.loading = false
        }
        console.log(res)
        this.manage.page.list = res.data.list
        this.manage.page.totalNum = res.data.totalNum
      }).catch((err) => {
        console.log(err)
      })
    },
    getMatrixTotalCount (params) {
      this.$api.matrixTotalCount(params).then((res) => {
        if (res.code === 0) {
          this.totalCount.applyMoney = res.data.applyMoney || 0 // 申请提现总额
          this.totalCount.appliedSuccessMoney = res.data.appliedSuccessMoney || 0 // 提现成功总额
          this.totalCount.appliedFailMoney = res.data.appliedFailMoney || 0 // 提现失败总额
          this.totalCount.handlingFee = res.data.handlingFee || 0 // 收取手续费总额
          this.totalCount.waitPayMoney = res.data.waitPayMoney || 0 // 待打款金额
          this.totalCount.waitAuditMoney = res.data.waitAuditMoney || 0 // 待审核金额 待审核通过金额
          this.totalCount.applyNum = res.data.applyNum || 0 // 申请提现总人数
          this.totalCount.applySuccessNum = res.data.applySuccessNum || 0 // 提现成功次数
          this.totalCount.applyFailNum = res.data.applyFailNum || 0 // 提现失败次数
          // this.totalCount = res.data
        }
      }).catch((err) => {
        console.log(err)
      })
    }
  }
}
</script>
<style scoped lang="scss">
.Box {
  display: flex;
  justify-content: flex-start;
  width: 100%;

  .table_tab {
    width: 100%;
    margin-bottom: 50px;
  }
}
.table {
  border-radius: 5px;
  width: 100%;
}

.header {
  display: flex;
  align-items: center;
  font-size: 18px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #333333;
  padding-bottom: 10px;
}

.inquiry {
  background: #fff;
  padding: 10px 20px 10px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
}
.inquiryTab {
  background: #fff;
  padding: 10px 20px 20px 20px;
  border-radius: 5px;
  .el-form {
    margin-top: 10px;
  }
  margin-top: 20px;
  .inquiryTab_header {
    display: flex;
    justify-content: space-between;
    /deep/ .el-button {
      height: 40px;
    }
    div{
      .el-button{
        font-weight: 400;
        border: none;
        &:nth-child(1){ background-color: #12AB62; }
        &:nth-child(2){ background-color: #F33F3F; }
        &:nth-child(3){ background-color: #4168E7; }
      }
    }
  }
}

/deep/.el-table__expand-icon > .el-icon {
  color: transparent;
}

.table {
  margin-top: 10px;
  border: 1px solid #e8eaec;
  border-radius: 0;
  /deep/ .el-input--suffix .el-input__inner {
    // background: #409eff;
    color: #000;
    width: 104px;
    box-shadow: none;
  }
  /deep/ .el-button {
    padding: 10px 13px;
  }
}

.page {
  text-align: right;
  width: 100%;
  background: #f5f5f5;
  padding-right: 30px;
  position: fixed;
  bottom: 0px;
  right: 0px;
  z-index: 5;

  span {
    font-size: 14px;
    color: #666;
    display: inline-block;
    margin-left: 10px;
  }
  .el-pagination {
    display: inline-block;
    vertical-align: middle;
  }
}
/deep/.el-table__row:hover {
  color: rgb(45, 125, 223);
}
/deep/.el-dialog__header {
  padding: 20px 20px 20px 20px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 25px;
  color: #333333;
}
/deep/.el-dialog {
  border-radius: 10px;
}
/deep/.el-dialog__headerbtn {
  top: 15px;
}
.headerbox {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  border-bottom: 1px solid #ededed;
  padding-bottom: 10px;
}

.tabTitle {
  font-size: 18px;
  font-weight: 400;
  line-height: 25px;
  color: #333333;
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 20px;
  p{
    margin-left: 20px;
    font-size: 14px;
    display: inline-block;
    label{
      width: 48px;
      height: 26px;
      padding: 0 5px;
      margin-right: 10px;
      border: 1px solid #4168E7;
      border-radius: 4px;
      color: #4168E7;
    }
  }
}
/deep/.el-form-item__label {
  font-size: 14px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #333333;
}

/deep/ .el-dialog__footer {
  margin-top: -20px;
  padding-top: 20px;
}
/deep/.el-table thead {
  font-size: 16px;
  font-family: PingFang SC;
  font-weight: bold;
  line-height: 22px;
  color: #333333;
  opacity: 1;
}

.btnClass{
  margin-top: 30px;
  display: flex;
  justify-content: right;
}

.search-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 100%;
    max-width: 303px;
    min-width: 299px;
    /deep/.el-form-item__label{
      width: 70px;
    }
    /deep/.el-form-item__content {
      width: calc(100% - 70px);
      .el-select, .el-date-editor, .el-cascader {
        width: 100%;
      }
    }
  }
}
.dialogCenter{
  text-align: center;
}
.dialogTitle{
  font-size: 15px;
  font-weight: 800;
}

:deep(.dialogNopass .el-textarea__inner){
  margin-top: 13px;
}
:deep(.set .el-form-item){
  margin-bottom: 5px;
}
:deep(.set .el-form-item__error){
  top:81%
}
.operationBtn{width: 100px; height: 36px; line-height: 11px}
.tongji:after, .tongji ul:after, .tongji ul li:after{ clear: both; display: table; content: ''; }
.tongji{
  margin-bottom: 20px;
  ul{
    float: left;
    background-color: #F2F5FF;
    width: 70%;
    display: flex;
    li{
      font-weight: bold;
      flex: 1;
      color: #333333;
      font-size: 14px;
      padding: 10px;
      p{
        text-align: center;
        line-height: 200%;
        &:last-child{
          font-size: 18px;
          color: #4168E7;
        }
      }
    }
    &:last-child{
      width: calc(30% - 16px);
      margin-left: 16px;
    }
  }
}
</style>
